<template>
  <div class="app-container">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <div slot="header" class="label-header-msg">
        <span>账户信息录入</span>
      </div>

      <el-row type="flex">
        <el-col :offset="6" :span="8">
          <el-form-item label="系统编号：" prop="sysCode">
            <el-select style="width: 100%" v-model="submitParams.sysCode" placeholder="系统编号">
              <el-option
                v-for="dict in dictMap['Cnaps2Dict.ORGAN_SYSTYPE_310']"
                :key="dict.value"
                :label="`${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="6" :span="8">
          <el-form-item label="参与机构号：" prop="stBrno">
            <el-input v-model="submitParams.stBrno" @change="checkbankcode('acctBrno')" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('acctBrno')">
              行名行号查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :offset="6" :span="8">
          <el-form-item label="参与机构名称：" prop="stBrnoName">
            <el-input v-model="submitParams.stBrnoName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
    <ht-table
      ref="dataTable"
      :showSerialNumber="false"
      :multi-select="false"
      :opButtonList="opButtonList"
      :tableBindColumns="tableBindColumns"
      :showRightToolbar="false"
      :randomRowKey="true"
      :showPagination="false"
    >
      <template v-slot:operate>
        <el-table-column label="操作" align="center" width="120" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: '删除',
                  // permission: 'user:xxx:xxx',
                  doFunc: () => {
                    handleAction('del', scope.row, scope.$index);
                  },
                },
              ]"
            />
          </template>
        </el-table-column>
      </template>
    </ht-table>
    </el-row>
    <el-row>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="detailList.length">
      </el-pagination>
    </el-row>
    <el-form ref="bottomForm" :model="submitParams" label-width="120px">
      <el-row type="flex">
        <el-col :offset="6" :span="12">
          <el-form-item label="备注：" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks" maxlength="256" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading">提交</el-button>
      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>
    </div>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </div>
</template>

<script>
import { submit } from "@/api/cnaps/ccms/903/digital_certificate_download_apply.js";
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
export default {
  name: "generalInformationEntry",
  mixins: [listPageMixin],
  components: { BankBranchDialog },
  computed: {},
  data() {
    return {
      isLoading: false,
      //前端分页参数
      currentPage: 1,
      pageSize: 20,
      detailList: [],

      tableBindColumns: [
        { label: `参与机构号`, prop: "stBrno", align: "center" },
        {
          label: `参与机构名称`,
          prop: "stBrnoName",
          align: "center",
        },
      ],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:expandConfInfo:add",
            actionType: "add",
            clickFun: () => {
              this.addRow();
            },
          },
        ];
      },
      // 录入参数
      submitParams: {
        sysCode: "BEPS",
        stBrno: "",
        stBrnoName: "",
        remarks: "",
      },
      bottomForm: {},
      searchFormDictList: ["Cnaps2Dict.ORGAN_SYSTYPE_310"],
      rules: {
        stBrno: [{ required: true, message: "不能为空", trigger: "blur" }],
        stBrnoName: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  mounted() {},

  methods: {
    /** 提交按钮 */
    submitForm: function () {
      if (this.$refs.dataTable.dataList.length === 0) {
        this.msgError("请新增一条记录!");
        return;
      }
      this.$set(this.rules.stBrno[0], "required", false);
      this.$set(this.rules.stBrnoName[0], "required", false);
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.submitParams.detailListTbl = this.detailList;
          this.loading = true;
          submit(this.submitParams)
            .then((response) => {
              this.msgSuccess("提交成功");
              this.loading = false;
            })
            .catch((err) => {
              this.$set(this.rules.stBrno[0], "required", true);
              this.$set(this.rules.stBrnoName[0], "required", true);
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      this.resetForm("bottomForm");
      this.$set(this.$refs.dataTable, "dataList", []);
      this.detailList = [];
      this.$set(this.rules.stBrno[0], "required", true);
      this.$set(this.rules.stBrnoName[0], "required", true);
    },

    //增加行
    addRow() {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          let list = {
            stBrno: this.submitParams.stBrno,
            stBrnoName: this.submitParams.stBrnoName,
          };

          this.$refs.dataTable.dataList.push(list);
          this.detailList.push(list);
          this.handleCurrentChange(this.currentPage);
          this.$set(this.submitParams, "stBrno", undefined);
          this.$set(this.submitParams, "stBrnoName", undefined);
        }
      });
    },
    /** 明细按钮操作 */
    handleAction(type, row, index) {
      switch (type) {
        case "del":
          // 删除
          this.$confirm("确认删除该条数据吗?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            let delIndex = (this.currentPage-1) * this.pageSize + index;
            this.detailList.splice(delIndex, 1);
            this.$refs.dataTable.dataList = this.detailList
            if(index === 0 && this.currentPage !== 1){
              this.handleCurrentChange(this.currentPage-1);
            }else {
              this.handleCurrentChange(this.currentPage);
            }
          });
          break;
      }
    },

    getChangeType(e) {
      let typeList = this.dictMap.MSG_TYPE148;
      for (let i = 0; i < typeList.length; i++) {
        if (typeList[i].value === e) {
          //dictValue，dictLabel保持和上面定义一致
          return typeList[i].value + "-" + typeList[i].text;
        }
      }
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      this.$set(this.submitParams, "stBrno", row.bankCode);
      this.$set(this.submitParams, "stBrnoName", row.orgFullname);
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },

    checkbankcode() {
      let stBrno = this.submitParams.stBrno;
      getBankInfByBankCode(stBrno)
        .then((response) => {
          if (response.code == "S" && response.result !== null) {
            this.$set(this.submitParams, "stBrno", response.result.bankCode);
            this.$set(this.submitParams, "stBrnoName", response.result.orgFullname);
          } else {
            this.msgError("无行名行号记录");
            this.$set(this.submitParams, "stBrnoName", null);
          }
        })
        .catch((err) => {
          this.$set(this.submitParams, "stBrnoName", null);
        });
    },

    //前端分页方法
    //切换每页显示数据量时的回调
    handleSizeChange(size) {
      this.pageSize = size;
      this.handleCurrentChange(this.currentPage);
    },
    handleCurrentChange(currentPage) {
      let page = this.detailList.slice((currentPage-1)*this.pageSize,currentPage*this.pageSize);
      this.$refs.dataTable.dataList = page
      this.currentPage = currentPage;
    },
  },
};
</script>
<style>
.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
</style>
